<html>
<head>
<title>VIP CODER</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css"
	href="css/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/flat-ui.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="shortcut icon" href="img/favicon.ico">
<style>
	/* Space out content a bit */
	body {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* Everything but the jumbotron gets side spacing for mobile first views */
	.header,
	.marketing,
	.footer {
		padding-right: 15px;
		padding-left: 15px;
	}

	/* Custom page header */
	.header {
		padding-bottom: 20px;
		border-bottom: 1px solid #e5e5e5;
	}
	/* Make the masthead heading the same height as the navigation */
	.header h3 {
		margin-top: 0;
		margin-bottom: 0;
		line-height: 40px;
	}

	/* Custom page footer */
	.footer {
		padding-top: 19px;
		color: #777;
		border-top: 1px solid #e5e5e5;
	}

	.container-narrow > hr {
		margin: 30px 0;
	}

	/* Main marketing message and sign up button */
	.jumbotron {
		text-align: center;
		border-bottom: 1px solid #e5e5e5;
	}
	.jumbotron .btn {
		padding: 14px 24px;
		font-size: 21px;
	}

	/* Supporting marketing content */
	.marketing {
		margin: 40px 0;
	}
	.marketing p + h4 {
		margin-top: 28px;
	}

	/* Responsive: Portrait tablets and up */
	@media screen and (min-width: 768px) {
		/* Remove the padding we set earlier */
		.header,
		.marketing,
		.footer {
			padding-right: 0;
			padding-left: 0;
		}
		/* Space out the masthead */
		.header {
			margin-bottom: 30px;
		}
		/* Remove the bottom border on the jumbotron for visual effect */
		.jumbotron {
			border-bottom: 0;
		}
	}


</style>
</head>

<body>
	<div class="container">

		<div class="header clearfix">
			<nav>
				<ul style="display:none;" class="nav nav-pills pull-right">
					<!--<li role="presentation" class="active"><img src="img/vipcoder.png" /></li>-->
					<li role="presentation"><a target="_blank" href="http://km.tutorabc.com/pages/viewpage.action?pageId=16499436">Help</a></li>
					<!--<li role="presentation"><a href="#">Contact</a></li>-->
				</ul>
			</nav>
			<img src="img/vipcoder.png"  width="15%"/>

			<div class="col-xs-3 pull-right">
				<select id="dbselect" name="projectType">
					<option value="" disabled selected hidden>选择数据库</option>
				</select>
			</div>
		</div>

		<!--<nav class="navbar navbar-default" style="min-height: 60px;">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#"><img style="float: none;clear:both;" src="img/vipcoder.png" /></a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="active" target="_blank"><a href="http://km.tutorabc.com/pages/viewpage.action?pageId=16499436">wiki</a></li>
					</ul>
					&lt;!&ndash;<ul class="nav navbar-nav navbar-right">&ndash;&gt;
						&lt;!&ndash;<li><a href="http://km.tutorabc.com/pages/viewpage.action?pageId=16499436">help</a></li>&ndash;&gt;
					&lt;!&ndash;</ul>&ndash;&gt;
				</div>&lt;!&ndash;/.nav-collapse &ndash;&gt;
			</div>&lt;!&ndash;/.container-fluid &ndash;&gt;
		</nav>-->
		<form class="form-horizontal" role="form" id="form">
			<div class="form-group">
				<label for="projectType" class="col-lg-2 control-label">项目类型</label>
				<div class="col-xs-2">
					<select id="projectType" name="projectType">
						<option value="springboot">--springboot--</option>
						<option value="">--不生成项目--</option>
					</select>
				</div>
				<label for="webType" class="col-lg-2 control-label">前端框架</label>
				<div class="col-xs-2">
					<select id="webType" name="webType">
						<option value="bootstrap">--bootstrap--</option>
						<option value="">--不生成--</option>
					</select>
				</div>
				<label for="projectName" class="col-lg-2 control-label">项目名</label>
				<div class="col-xs-2">
					<input type="text" placeholder="不生成项目可以不填" value="demo" id="projectName" name="projectName" class="form-control"/>
				</div>

			</div>

			<div class="form-group">
				<label for="type" class="col-lg-2 control-label">数据库类型</label>
				<div class="col-xs-2">
					<select id="type" name="type" class="form-control">
						<option value="mysql">mysql</option>
						<option value="sql_server">sqlserver</option>
					</select>
				</div>
				<label for="connection" class="col-lg-2 control-label">数据库连接</label>
				<div class="col-xs-2">
					<input type="text" id="connection" name="connection" class="form-control" required/>
				</div>
				<label for="connection" class="col-lg-2 control-label">id生成策略</label>
				<div class="col-xs-2">
					<select id="idGenerator" name="idGenerator" class="form-control">
						<option value="autoIncrement">自增</option>
						<option value="sequence">sequenceId全局唯一</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="logtype" class="col-lg-2 control-label">日志文件</label>
				<div class="col-xs-2">
					<select name="logtype" id="logtype">
						<option value="logback">logback</option>
						<!-- <option value="tgoplog">tgoplog-elk</option> -->
					</select>
				</div>
				<label for="port" class="col-lg-2 control-label">端口号</label>
				<div class="col-xs-2">
					<input type="text" placeholder="3306" value="3306" id="port" name="port" class="form-control" required/>
				</div>
				<label for="databaseName" class="col-lg-2 control-label">数据库</label>
				<div class="col-xs-2">
					<input type="text"  id="databaseName" name="databaseName" class="form-control" required/>
				</div>
			</div>
			
			<div class="form-group">
				<label for="username" class="col-lg-2 control-label">用户名</label>
				<div class="col-xs-2">
					<input type="text" id="username" name="username" class="form-control" required/>
				</div>
				<label for="password" class="col-lg-2 control-label">密码</label>
				<div class="col-xs-2">
					<input type="text"  id="password" name="password" class="form-control"/>
				</div>
				<label style="display:none"  for="enableRedisCache" class="col-lg-2 control-label">添加redis配置</label>
				<div style="display:none" class="col-xs-2">
					<select id="enableRedisCache" name="enableRedisCache">
						<option value="false" selected>否</option>
						<option value="true">是</option>
					</select>
				</div>
			</div>

			<div class="form-group" id="redisConfig" style="display: none;">
				<label for="redisHost" class="col-lg-2 control-label">redis 地址</label>
				<div class="col-xs-2">
					<input id="redisHost" name="redisHost" class="form-control">
				</div>
				<label for="redisPassword" class="col-lg-2 control-label">redis 密码</label>
				<div class="col-xs-2">
					<input id="redisPassword" name="redisPassword" class="form-control">
				</div>
				<label for="redisPort" class="col-lg-2 control-label">redis 端口</label>
				<div class="col-xs-2">
					<input id="redisPort" name="redisPort" value="6379" class="form-control">
				</div>

			</div>

			<div style="display:none" class="form-group">
				<label for="enableMicroService" class="col-lg-2 control-label">添加微服务支持</label>
				<div class="col-xs-2">
					<select id="enableMicroService" name="enableMicroService">
						<option value="true">是</option>
						<option value="false" selected>否</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="parent" class="col-lg-2 control-label">父级目录</label>
				<div class="col-lg-4">
					<input type="text"  class="form-control" placeholder="com.liuwei.code" id="parent" name="parent" required/>
				</div>
				<label for="controller" class="col-lg-2 control-label">controller目录</label>
				<div class="col-lg-4">
					<input type="text" value="controller" class="form-control" placeholder="controller" id="controller" name="controller" required/>
				</div>
			</div>
			
			<div class="form-group">
				<label for="service" class="col-lg-2 control-label">service接口目录</label>
				<div class="col-lg-4">
					<input type="text" value="service" class="form-control" placeholder="service" id="service" name="service" required/>
				</div>
				<label for="serviceImpl" class="col-lg-2 control-label">serviceImpl目录</label>
				<div class="col-lg-4">
					<input type="text" value="service.impl" class="form-control" placeholder="serviceImpl" id="serviceImpl" name="serviceImpl" required/>
				</div>
			</div>

			<div class="form-group">
				<label for="mapper" class="col-lg-2 control-label">Mapper(DAO)目录</label>
				<div class="col-lg-4">
					<input type="text" value="mapper" class="form-control" placeholder="mapper" id="mapper" name="mapper" required/>
				</div>
				<label for="xml" class="col-lg-2 control-label">mapper.xml目录</label>
				<div class="col-lg-4">
					<input type="text" value="xml" class="form-control" placeholder="xml" id="xml" name="xml" required/>
				</div>
			</div>
			<div class="form-group">
				<label for="entity" class="col-lg-2 control-label">实体目录</label>
				<div class="col-lg-4">
					<input type="text" value="entity" class="form-control" placeholder="entity" id="entity" name="entity" required/>
				</div>
				<label for="author" class="col-lg-2 control-label">author注释作者</label>
				<div class="col-lg-4">
					<input type="text" value="author" class="form-control" placeholder="author" id="author" name="author" required/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-2" style="text-align: center;">
					<button type="button"  onclick="showTables();" class="btn btn-primary">刷新表名</button>
				</div>
				<div class="col-lg-10">
					<input type="text" class="form-control" placeholder="指定表名，逗号隔开, 不填为全部" id="specifiedTable" name="specifiedTable" />
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-2" style="text-align: center;"></div>
				<div id="tablesDiv" class="col-md-10" style="text-align: center;">
				</div>
			</div>
			<!--<%&#45;&#45;<div class="form-group">&#45;&#45;%>-->
				<!--<%&#45;&#45;<label for="tableNames" class="col-lg-2 control-label">表名</label>&#45;&#45;%>-->
				<!--<%&#45;&#45;<div class="col-xs-3">&#45;&#45;%>-->
					<!--<%&#45;&#45;<input type="text" id="tableNames" name="tableNames" class="form-control" required/>&#45;&#45;%>-->
				<!--<%&#45;&#45;</div>&#45;&#45;%>-->
				<!--<%&#45;&#45;<label for="modelNames" class="col-lg-2 control-label">实体名</label>&#45;&#45;%>-->
				<!--<%&#45;&#45;<div class="col-xs-3">&#45;&#45;%>-->
					<!--<%&#45;&#45;<input type="text" id="modelNames" name="modelNames" class="form-control" required/>&#45;&#45;%>-->
				<!--<%&#45;&#45;</div>&#45;&#45;%>-->
				<!--<%&#45;&#45;<a class="btn btn-success btn-xs" onclick="addItem()" title="增加">&#45;&#45;%>-->
					<!--<%&#45;&#45;<span class="fui-check">&nbsp;增加</span>&#45;&#45;%>-->
				<!--<%&#45;&#45;</a>&#45;&#45;%>-->
			<!--<%&#45;&#45;</div>&#45;&#45;%>-->

		</form>
		
		<div class="form-group">
			<div class="col-md-12" style="text-align: center;">
	          <a id="submitBtn" href="javascript:void(0);" onclick="doSum();" style="width: 200px;background-color:#00A5FF;color:white;" class="btn btn-lg"><span class="fui-check-circle"></span>&nbsp;生成并下载</a>
	        </div>
		</div>
	
	</div>
	<!-- /container -->
	<footer> </footer>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery-3.1.1.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/flat-ui.min.js"></script>
	<script src="js/jquery.form.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<script>
		$(function() {
			initDB();
			$("#form").validate();// 加载配置
		});

		function initDB(){
			var url =  '/dbs?' + Math.random();
			$.ajax({
				type : 'get',
				url : url,
				success : function (data, textStatus) {
					if(data.success){
						$.each(data.data,function(m,n){
							console.log(n);
							console.log(n);
							document.getElementById("dbselect").options.add(new Option('['+n.name+']'+n.remark,JSON.stringify(n)))
						});
					}else{
						alert("请求异常：" + data.code + "\n异常原因:" + data.message);
					}
				},
				error: function (jqXHR, extStatus, errorThrown) {
					httpcode = jqXHR.status
					responseMsg = jqXHR.responseText
					alert("请求异常：" + httpcode + "&nbsp&nbsp&nbsp&nbsp 异常原因:\r\n" + responseMsg);
				}
			});
		}

		// 添加 change 事件监听器
		const select = document.getElementById('dbselect');
		select.addEventListener('change', event => {
			// 获取当前选中的选项的值
			const selectedValue = event.target.value;
			if(selectedValue){
				var selected = JSON.parse(selectedValue)
				$("#projectName").val(selected.name)
				$("#connection").val(selected.ip)
				$("#port").val(selected.port)
				$("#databaseName").val(selected.db)
				$("#username").val(selected.user)
				$("#password").val(selected.password)
				$("#parent").val(selected.packages)
			}
		});

		function addItem(){
			var item = "";
			item += "<div class='form-group'>"
	     		+"<label class='col-lg-2 control-label'>表名</label>"
	     		+"<div class='col-xs-3'><input type='text' name='tableNames' class='form-control' /></div>"
	     		+"<label class='col-lg-2 control-label'>模型名</label>"
	     		+"<div class='col-xs-3'><input type='text' name='modelNames' class='form-control' /></div>"
	     		+"<a class='btn btn-success btn-xs' onclick='addItem()' title='增加'><span class='fui-check'>&nbsp;增加</span></a>&nbsp;"
	     		+"<a class='btn btn-danger btn-xs' onclick='redItem(this)' title='删除'><span class='fui-cross'>&nbsp;增加</span></a>"
	     		+"</div>";
			$("#form").append(item);
		}
		
		function redItem(para){
			$(para).parent().remove();
		}
		
		function doSum(){
			if($("#form").valid(this,'填写信息不完整。') == false){
				return;
			}
			if (typeof($("#submitBtn")) != "undefined") { 
				$("#submitBtn").attr("disabled", "disabled");
			}
			var url =  '/generator?' + Math.random();
			$.ajax({
				type : 'post',
				url : url,
				dataType : 'json',
				data : $("#form").serialize(),
				success : function (data, textStatus, jqXHR) {
					$("#submitBtn").removeAttr("disabled");
					if(data.success){
                        window.open("/generator/download?url=" +data.data);
					}else {
					    alert(data.message);
					}
			    },
	            error: function (jqXHR, extStatus, errorThrown) {
	               httpcode = jqXHR.status
	               responseMsg = jqXHR.responseText
	               alert("请求异常：" + httpcode + "&nbsp&nbsp&nbsp&nbsp 异常原因:\r\n" + responseMsg);
	               $("#submitBtn").removeAttr("disabled");
	            }
			});
		}

		function showTables(){
			if($("#form").valid(this,'填写信息不完整。') == false){
				return;
			}
			var url =  '/tables?' + Math.random();
			$.ajax({
				type : 'post',
				url : url,
				dataType : 'json',
				data : $("#form").serialize(),
				success : function (data, textStatus) {
                    if(data.success){
						$("#tablesDiv").html("&nbsp;<input type='checkbox' id='selectAll' onclick='tablesSelect(this)' name='selectAll' value='0'>全部");
					    $.each(data.data,function(m,n){
					        console.log(n);
					        $("#tablesDiv").append("&nbsp;&nbsp;<input type='checkbox' onclick='tablesSelect(this)' name='tableNames' value='"+n.name+"'>"+n.name);
						});
					}else{
						alert("请求异常：" + data.code + "\n异常原因:" + data.message);
					}
			    },
	            error: function (jqXHR, extStatus, errorThrown) {
		               httpcode = jqXHR.status
		               responseMsg = jqXHR.responseText
		               alert("请求异常：" + httpcode + "异常原因:" + responseMsg);
		               $("#submitBtn").removeAttr("disabled");
		        }
			});
		}

		function tablesSelect(obj){
		    var selected = $(obj).is(':checked');
		    var value = $(obj).val();
		    if(value==0){//全部选中
				if(selected){
                    $("input[name='tableNames']").prop("checked","true");
				}else{
                    $("input[name='tableNames']").prop("checked",false);

                }

			}else{
		        if(!selected){
		            $("#selectAll").prop("checked",false);
				}else{
		            flag = true;
                    $("input[name='tableNames']").each(function(){
                        if(!this.checked){
                            flag = false;
                            return false;
						}
					});
		            if(flag){
                        $("#selectAll").prop("checked","true");
                    }
				}
			}
		}

//		$("#enableRedisCache").change(function(){
//		    if($(this).val()=="true"){
//		        $("#redisConfig").show();
//			}else{
//                $("#redisConfig").hide();
//            }
//		});
	</script>
</body>
</html>
